<template>
	<view class="commission">
		<view class="list_box" >
			<view class="list" @click="showPicker('date')">
				<view>{{year}}年{{month}}月</view>
			</view>
			<view class="list_two" v-for="(item,index) in list">
				<view class="list_two_top">
					<view class="type">{{item.changetitle}}</view>
					<view class="type" style="color:red;" v-show="item.changeType==1">+{{item.changeNum}}</view>
					<view class="type" style="color:green;" v-show="item.changeType==2">-{{item.changeNum}}</view>
				</view>
				<view class="list_two_top list_two_top1">
					<view class="num">{{item.created_at}}</view>
					<view class="num">结余 {{item.endNum}}</view>
				</view>
			</view>
		</view>
		<w-picker mode="date" fields="month" @confirm="onConfirm($event,'date')" @cancel="onCancel" ref="date" ></w-picker>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				list:[],
				type:1,
				id:0,
				userinfo:[],
				year:'',
				month:'',
				isShow:true
			}
		},
		onLoad(options) {
			this.userinfo=uni.getStorageSync('user');
			this.id=options.id;
			this.type = options.type;
			var date = new Date();
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1;
			uni.setNavigationBarTitle({
				title:'收益列表'
			})
			this.getinfo();
		},
		methods: {
			showPicker(type) {
				this.$refs[type].show();
				this.isShow = !this.isShow;
			},
			onConfirm(res, type) {
				this.isShow = !this.isShow;
				switch (type) {
					case "date":
						this.year = res.obj.year;
						this.month = res.obj.month;
						break;
				}
				this.getinfo();
			},
			onCancel(){
				this.isShow = !this.isShow;
			},
			getinfo(){
				var that=this;
				this.$http.get('shop/getCommDetail',{
					year:that.year,
					month:that.month,
					type:that.type
				}).then(function (response) {
					console.log(response.data);
					that.list=response.data;
				}).catch(function (error) {
					console.log(error);
				});
				
			},
			navTab:function(n){
				this.navIndex = n;
			}
		}
	}
</script>

<style scoped lang="scss">
	.commission{
		width: 100%;
		.list_box{
			background: #f6f6f6;
			.list_two{
				padding: 30rpx 30rpx 0;
				background: #fff;
				.list_two_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					&.list_two_top1{
						padding-top: 10rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #e5e5e5;
					}
					.type{
						color: #333;
						font-size: 30rpx;
					}
					.num{
						color: #666666;
						font-size: 26rpx;
					}
				}
			}
			.list{
				padding: 30rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				color: #333;
				font-size: 34rpx;
				border-bottom: 1px solid #fff;
				.b_img{
					margin-left: 10rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
</style>
